在實際的專案當中，HTML頁面上很有可能出現以下的程式碼。

直接在頁面上調用 $、React、ReactDOM，由於 jQuery、React、React-dom 都會打包進 Webpack，透過 Webpack 封裝過後，這些第三方套件無法直接在全域取得。所以我們使用 expose-loader 來將這些第三方套件暴露到全域。

首先安裝 expose-loader

npm i expose-loader -D

Webpack 設定檔修改如下

webpack.common.js

module.exports = {
  entry: {
    Vendor: [
      'expose-loader?$!expose-loader?jQuery!jquery',
      'expose-loader?React!react',
      'expose-loader?ReactDOM!react-dom'
    ]
  }
}

這樣即可將第三方套件暴露到全域。

再舉另外一個例子，在 ASP.NET MVC 專案有使用 Reactjs.NET 處理 SSR，因此必須在 cshtml 調用 React Components

@Html.React("App", new
{
    model = Model,
}, containerId: "App", serverOnly: true)

那這些 Components 該如何暴露出來呢？
如果用 expose-loader 會比較麻煩，這裡可以直接使用 output 設定來處理

webpack.common.js

module.exports = {
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'Resource/Bundle')
    library: 'Components',
  }
}

透過 library 的設定，可以把 Webpack 入口頁面 export 的 Component 暴露到全域底下的 Components 頁面上就可以在 window.Components 調用到 React component

@Html.React("Components.App", new
{
    model = Model,
}, containerId: "App", serverOnly: true)

Github DEMO